<template>
  <div class="login-container">
    <top-color v-show="false"></top-color>
    <div class="login-weaper animated bounceInDown">
      <div class="login-left">
        <div class="login-time">
          {{time}}
        </div>
        <img class="img"
             src="/img/logo.png"
             alt="">
        <p class="title">{{ $t('login.info') }}</p>
      </div>
      <div class="login-border">
        <div class="login-main">
          <h4 class="login-title">
            注册 {{website.title}}
            <top-lang></top-lang>
          </h4>
          <avue-form :option="formOption"
                     v-model="formData"
                     @submit="handleSubmit">
          </avue-form>
          <div class="login-menu">
            <!--            <a href="#" @click.stop="activeName='user'">{{ $t('login.userLogin') }}</a>-->
            <!--<a href="#" @click.stop="activeName='code'">{{ $t('login.phoneLogin') }}</a>-->
            <!--            <a href="#" @click.stop="activeName='third'">{{ $t('login.thirdLogin') }}</a>-->
          </div>
          <copyright/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import {mapGetters} from "vuex";
import {dateFormat} from "@/util/date";
import Copyright from "@/components/copyright";
import {auth} from "@/api/shop/shop";

export default {
  name: 'authredirectalibaba',
  components: {Copyright},
  computed: {
    ...mapGetters(["website", "tagWel"])
  },
  data() {
    return {
      formData: {},
      formOption: {
        labelWidth: 110,
        submitBtn: true,
        submitText: '确定',
        submitIcon: false,
        emptyBtn: false,
        column: [
          {
            label: "授权选项",
            prop: "type",
            slot: true,
            editDisabled: true,
            labelTip: '首次进入订单系统, 如果您有已注册的账户可以选择绑定已有账户, 没有请选择注册并登录!',
            rules: [{
              required: true,
              message: "请选择授权选项",
              trigger: "blur"
            }],
            search: true,
            type: 'select',
            dicData: [
              {
                label: "注册并登录",
                value: "register"
              },
              {
                label: "登录已有账户",
                value: "login"
              }
            ],
            props: {
              label: "label",
              value: "value"
            },
            span: 24,
            row: true
          },
          {
            label: "账户",
            prop: "account",
            slot: true,
            editDisabled: true,
            rules: [{
              required: true,
              message: "请输入账户",
              trigger: "blur"
            }],
            span: 24,
            row: true
          },
          {
            label: "密码",
            prop: "password",
            type: 'password',
            slot: true,
            editDisabled: true,
            rules: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            }],
            span: 24,
            row: true
          }
        ]
      },
      time: '',
      aliId: '',
      tenantId: '',
    }
  },
  created () {
    this.auth()
  },
  methods: {
    removeCode() {
      let url = window.location.href
      if (url.indexOf("?") !== -1) {
        url = url.replace(/(\?|#)[^'"]*/, '');
        window.history.pushState({}, 'code', url);
      }
    },
    auth() {
      const params = this.$route.query
      let code = params.code
      if (!code) {
        code = new URL(window.location.href).searchParams.get('code')
      }
      auth(code).then(res => {
        this.aliId = res.data.data.aliId
        if (this.tenantId && this.tenantId !== '') {
          const loading = this.$loading({
            lock: true,
            text: '登录中,请稍后。。。',
            spinner: "el-icon-loading"
          });
          this.$store.dispatch("LoginByAlibabaId", this.aliId).then(() => {
            this.removeCode()
            this.$router.push({path: this.tagWel.value});
            loading.close();
          }).catch(() => {
            loading.close()
          });
        }
      })
    },
    handleSubmit(form, done) {
      if (form.type === 'login') {
        this.$store.dispatch("FedLogOut").then(() => {
          this.removeCode()
          this.$router.push({path: `/login?aliId=${this.aliId}`})
        })
      } else {
        const loading = this.$loading({
          lock: true,
          text: '登录中,请稍后。。。',
          spinner: "el-icon-loading"
        });
        this.$store.dispatch("RegisterAndLoginByAlibabaId", {
          aliId: this.aliId,
          account: this.formData.account,
          password: this.formData.password,
        }).then(() => {
          this.removeCode()
          this.$router.push({path: this.tagWel.value});
          loading.close();
        }).catch(() => {
          loading.close()
        });
      }
      done()
    },
    getTime() {
      setInterval(() => {
        this.time = dateFormat(new Date());
      }, 1000);
    },
  }
}
</script>


<style lang="scss">
@import "@/styles/login.scss";
</style>
